document.addEventListener('DOMContentLoaded', function() {
  let allTabs = [];
  const searchInput = document.getElementById('searchInput');
  const exportBtn = document.getElementById('exportBtn');
  const closeSelectedBtn = document.getElementById('closeSelectedBtn');
  const selectAllCheckbox = document.getElementById('selectAllCheckbox');
  
  // 获取所有标签页信息
  function loadTabs() {
    chrome.tabs.query({}, function(tabs) {
      allTabs = tabs;
      renderTabs(tabs);
      updateSelectAllCheckbox();
    });
  }

  // 更新全选复选框状态
  function updateSelectAllCheckbox() {
    const checkboxes = document.querySelectorAll('.checkbox');
    const checkedBoxes = document.querySelectorAll('.checkbox:checked');
    
    if (checkboxes.length === 0) {
      selectAllCheckbox.checked = false;
      selectAllCheckbox.indeterminate = false;
    } else if (checkedBoxes.length === 0) {
      selectAllCheckbox.checked = false;
      selectAllCheckbox.indeterminate = false;
    } else if (checkedBoxes.length === checkboxes.length) {
      selectAllCheckbox.checked = true;
      selectAllCheckbox.indeterminate = false;
    } else {
      selectAllCheckbox.checked = false;
      selectAllCheckbox.indeterminate = true;
    }
  }

  // 渲染标签列表
  function renderTabs(tabs) {
    const tabList = document.getElementById('tabList');
    tabList.innerHTML = '';
    
    if (tabs.length === 0) {
      tabList.innerHTML = '<div class="no-results">没有找到匹配的标签页</div>';
      updateSelectAllCheckbox();
      return;
    }

    tabs.forEach(function(tab) {
      const tabDiv = document.createElement('div');
      tabDiv.className = 'tab-item';
      
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.className = 'checkbox';
      checkbox.dataset.tabId = tab.id;
      checkbox.addEventListener('change', updateSelectAllCheckbox);

      const contentDiv = document.createElement('div');
      contentDiv.className = 'tab-content';
      
      const title = document.createElement('div');
      title.className = 'title';
      title.textContent = tab.title;
      
      const url = document.createElement('div');
      url.className = 'url';
      url.textContent = tab.url;
      
      contentDiv.appendChild(title);
      contentDiv.appendChild(url);
      tabDiv.appendChild(checkbox);
      tabDiv.appendChild(contentDiv);
      tabList.appendChild(tabDiv);
    });
    updateSelectAllCheckbox();
  }

  // 全选功能
  selectAllCheckbox.addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.checkbox');
    checkboxes.forEach(checkbox => {
      checkbox.checked = selectAllCheckbox.checked;
    });
    updateSelectAllCheckbox();
  });

  // 搜索功能
  searchInput.addEventListener('input', function(e) {
    const searchText = e.target.value.toLowerCase();
    const filteredTabs = allTabs.filter(tab => 
      tab.title.toLowerCase().includes(searchText) || 
      tab.url.toLowerCase().includes(searchText)
    );
    renderTabs(filteredTabs);
  });

  // 导出功能
  exportBtn.addEventListener('click', function() {
    const exportData = allTabs.map(tab => ({
      title: tab.title,
      url: tab.url
    }));
    
    const blob = new Blob([JSON.stringify(exportData, null, 2)], {type: 'application/json'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'tabs_export.json';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });

  // 关闭选中的标签
  closeSelectedBtn.addEventListener('click', function() {
    const selectedCheckboxes = document.querySelectorAll('.checkbox:checked');
    const tabIds = Array.from(selectedCheckboxes).map(cb => parseInt(cb.dataset.tabId));
    
    if (tabIds.length > 0) {
      chrome.tabs.remove(tabIds, function() {
        loadTabs(); // 重新加载标签列表
      });
    }
  });

  // 初始加载
  loadTabs();
}); 